<template>
  <div class="person">
    <h1>情况三：监视【reactive】定义的【对象类型】数据</h1>
    <h2>姓名：{{ person.name }}</h2>
    <h2>年龄：{{ person.age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改整个人</button>
  </div>
</template>
<script lang="ts" setup name="Person">
import { reactive, watch } from 'vue'
// watch作用：监视数据的变化 和vue2中的作用一致
// 特点：Vue3中的watch只能监视以下四种数据
// 1.ref定义的数据：直接写数据名即可，监视的是value值的变化
// 2.reactive定义的数据
// 3.函数返回一个值（getter函数）
// 4.一个包含上诉内容的数组

// 数据
let person = reactive({
  name: '张三',
  age: 18
})
// 方法
function changeName(){
  person.name += '~'
}
function changeAge(){
  person.age += 1
}
function changePerson(){
  Object.assign(person,{name: '李四', age: 18})
}
/* 监视， 情况二：监视【ref】定义的【对象类型】数据，监视的是对象的地址值，若想监视对象内部属性的变化，需要手动开启深度监视。

注意：若修改的是ref定义的对象中的属性，newValue和oldValue都是新值，因为它们是同一个对象，
若修改的事red定义的对象，newValue是新值，oldValue是旧值，因为不是同一个对象了。

注意：watch方法默认监视整个对象，只有整个对象变化时才会执行，
若想监视对象内部属性的变化，可以加上参数deep: true，
这样对象内部属性如name和age发生变化时也会触发watch事件，
如果加上参数immediate: true，进入页面就会先执行一次watch,新的就是当前值，旧的就是undefined

watch的第一个参数是被监视的数据
watch的第二个参数是监视的回调
watch的第三个参数是配置对象（deep,immediate等等...）
*/
watch(person,(newValue, oldValue) => {
  console.log('person变化了', newValue, oldValue)
}, {deep: true, immediate: true})

</script>

<style scoped>
    .person {
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button {
        margin: 0 5px;
    }
</style>
